<template>
	<view class="page_bg">
		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('仓库管理')}}
		</div>


		<view class="store_search">
			<uv-icon name="search" color="#8C8C8C" size="40rpx"></uv-icon>
			<input class="input" type="text" v-model="sarchVal" placeholder="请输入仓库名称/仓库编号" />
			<view class="btn" @click="search()">
				{{$t('搜索')}}
			</view>
		</view>
		
		<div style="width:100%;height:100px;background-color: #fff;position: fixed; bottom:0;left:0;z-index: 9;display: flex;align-items: flex-start;justify-content: center;" >
			<div @click="rightClick" class="bg-primary h-90 center rounded-50 text-white"
				style="width: 90%;">{{$t('新增仓库')}}</div>
		</div>
		

		<div class="center mt-50">
			<u-empty v-if="emplList.length == 0" :text="$t('暂无数据')" iconSize="100rpx" textSize="30rpx"></u-empty>
		</div>
		<view class="store_list">
			<view class="store_item" v-for="(item, index) in emplList" :key="index">
				<div @click="goPlace(item)">
					<view class="store_title">
						<view class="name">
							{{$t('仓库编码')}}：{{ item.sn }}
						</view>
						<view class="city">
							<uv-icon name="map-fill" color="#D8D8D8" size="26rpx"></uv-icon>
							<view class="text" v-if="lang == 'zh'">
								{{ get(item, "area.name") }}
							</view>
							<view class="text" v-if="lang != 'zh'">
								{{ get(item, "area.name_ru") }}
							</view>
						</view>
					</view>
					<view class="store_name">
						<view class="name" v-if="lang == 'zh'">
							{{ item.name }}
						</view>
						<view class="name" v-if="lang != 'zh'">
							{{ item.name_ru }}
						</view>
						<view class="tag_yellow" v-if="item.brand">
							<view class="tag_bor" v-if="lang == 'zh'">
								{{ item.brand }}
							</view>
							<view class="tag_bor" v-if="lang != 'zh'">
								{{ item.brand_ru }}
							</view>
						</view>
					</view>
					<view class="store_info">
						<view class="item">
							<view class="name">
								{{$t('当前仓储重量')}}(kg）
							</view>
							<view class="text">
								{{ item.weight }}
							</view>
						</view>
						<view class="item">
							<view class="name">
								{{$t('当前仓储总体积')}}(m³）
							</view>
							<view class="text">
								{{ item.volume }}
							</view>
						</view>
						<view class="item">
							<view class="name">
								{{$t('当前仓储数量')}}
							</view>
							<view class="text">
								{{ item.number }}
							</view>
						</view>
					</view>
				</div>
				<view class="store_btns">
					<view class="btn_item">
						<navigator open-type="redirect" v-if="storage>0" :url="'/pages/storageIn/storageIn?w_id=' + item.id" hover-class="none">
							{{$t('货物入库')}}
						</navigator>
						<text v-if="storage<=0" @click="ruku">{{$t('货物入库')}}</text>
					</view>
					<view class="btn_item">
						<navigator open-type="redirect" :url="'/pages/cargoHistory/cargoHistory?item=' + JSON.stringify(item)"
							hover-class="none">
							{{$t('历史记录')}}
						</navigator>
					</view>
					<view class="btn_item">
						<navigator open-type="redirect" :url="'/pages/storeEdit/storeEdit?item=' + JSON.stringify(item)" hover-class="none">
							{{$t('仓库管理')}}</navigator>
					</view>
				</view>

			</view>
		</view>

		<view style="width:100%;height:150px;"> </view>
	</view>
</template>

<script>
import { warehouse_index } from '@/api/basic.js'

export default {
	data() {
		return {
			sarchVal: '',
			emplList: [],
			lang: 'zh',
			storage:0
		}
	},
	onLoad() {
		
		// this.getList()
	},
	onShow() {
		this.lang = uni.getStorageSync('lang')
		this.getUserInfo()
		this.getList()
	},
	onHide(){
	},
	methods: {
		getUserInfo() {
		  uni.request({
		    url: 'https://app.gluz.com.cn/api/user/getUserHomepage2',
		    data: {
		      user_id: uni.getStorageSync('user_id')
		    },
		    header: {
		      "user_id": uni.getStorageSync('user_id'),
		      'xzdToken': uni.getStorageSync('xzdToken'),
		      'version': uni.getStorageSync('version'),
		      'lang': uni.getStorageSync('lang'),
		    },
		    success: (res) => {
		      console.log(res.data);
		      this.userInfo = res.data.data.userInfo;
		      uni.setStorageSync('userInfoFull', res.data.data.userInfo)
			  uni.setStorageSync('getUser', res.data.data)
			  this.storage = uni.getStorageSync('getUser').storage
		    }
		  });
		},
		ruku(){
			uni.showToast({
				title:'请您先添加货位'
			})
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},

		rightClick() {
			uni.redirectTo({
			  url: '/pages/storeAdd/storeAdd'
			});
			// uni.redirectTo‌({
			// 	url: '/pages/storeAdd/storeAdd'
			// });
		},
		goPlace(item) {
			console.log('item9999000', item)
			uni.navigateTo({
				url: `/pages/storePlace/storePlace?name=${item.name}&id=${item.id}`
			});
		},
		search() {
			this.getList()
		},
		getList() {
			var that = this
			warehouse_index({ user_id: uni.getStorageSync('user_id'), 'page': 1, 'limit': 1000, 'keyword': this.sarchVal }).then(res => {
				that.emplList = res.data.data.data
			})
		},
	}
}
</script>

<style lang="scss">
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.store_list {
	padding: 0 24rpx;

	.store_item {
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		box-shadow: 0rpx 5rpx 14rpx rgba(0, 0, 0, 0.1);

		.store_info {
			padding: 15rpx 24rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 14rpx 0;

				.name {
					font-size: 26rpx;
					color: #535353;
					line-height: 40rpx;
				}

				.text {
					flex-shrink: 0;
					margin-left: 30rpx;
					font-size: 26rpx;
					color: #333;
					line-height: 40rpx;
					font-weight: bold;
				}
			}
		}

		.store_btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1rpx solid #F0F0F0;

			.btn_item {
				width: 100%;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 26rpx;
				color: #8C8C8C;
				border-left: 1rpx solid #F0F0F0;

				&:first-child {
					border: none;
				}
			}
		}

		.store_name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 24rpx;
			border-bottom: 1rpx solid #F0F0F0;
			height: 94rpx;

			.name {
				font-size: 32rpx;
				line-height: 40rpx;
				font-weight: bold;
			}

			.tag_yellow {
				flex-shrink: 0;
				background: #FCCE00;
				padding: 4rpx;
				border-radius: 6rpx;
				margin: 0 10rpx;
			}

			.tag_blue {
				flex-shrink: 0;
				background: #278AFF;
				padding: 4rpx;
				border-radius: 6rpx;
				margin: 0 10rpx;
				color: #fff;
			}

			.tag_bor {
				border: 1rpx solid #999;
				border-radius: 6rpx;
				font-size: 22rpx;
				line-height: 36rpx;
				padding: 0 14rpx;
			}
		}

		.store_title {
			margin: 0 24rpx;
			border-bottom: 1rpx solid #F0F0F0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 94rpx;

			.name {
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: bold;
			}

			.city {
				display: flex;
				align-items: center;

				.text {
					font-size: 20rpx;
					line-height: 20rpx;
					color: #999999;
					padding-left: 4rpx;
				}
			}
		}
	}



	.navbar_right {
		color: #278AFF;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.footer_none {
		width: 100%;
		height: 210rpx;
	}

	.footer_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding: 30rpx 30rpx 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

		.btn {
			width: 100%;
			height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #fff;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}

	.footer_btn1 {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding: 30rpx 0 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

		.btn_red {
			width: 100%;
			height: 110rpx;
			background: #FFB6B6;
			color: #FF1F1F;
			text-align: center;
			line-height: 110rpx;
			font-size: 32rpx;
		}

		.btn_gray {
			width: 100%;
			height: 110rpx;
			background: #C6C6C6;
			color: #fff;
			text-align: center;
			line-height: 110rpx;
			font-size: 32rpx;
		}
	}

	.footer_big_btn2 {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding: 0 0 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn_red {
			flex-shrink: 0;
			width: 240rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color: #fff;
			background: #FF6456;
			font-size: 32rpx;
		}

		.btn_yellow {
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color: #fff;
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			font-size: 32rpx;
		}
	}

	.footer_btn2 {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #fff;
		padding: 30rpx 30rpx 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			width: 48%;
			height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #fff;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.btn1 {
			width: 48%;
			height: 90rpx;
			border-radius: 50rpx;
			background: #fff;
			color: #8C8C8C;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			border: 1rpx solid #8C8C8C;
		}

		.btn2 {
			width: 48%;
			height: 90rpx;
			border-radius: 50rpx;
			background: #F7F7F7;
			color: #8C8C8C;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
		}
	}

}

.page_bg {
	background: url('/static/img/bg_1.png') no-repeat center top;
	background-size: 100% auto;
	min-height: 100%;
	// padding-top: 30rpx;
}

page {
	height: 100%;
}

.store_search {
	height: 80rpx;
	background: #fff;
	border-radius: 50rpx;
	margin: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4rpx 4rpx 4rpx 24rpx;

	.input {
		width: 100%;
		padding-left: 10rpx;
		font-size: 26rpx;
	}

	.btn {
		flex-shrink: 0;
		background: #278AFF;
		color: #fff;
		width: 134rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}
</style>
